<template>
  <div class="drawerDetail">
    <el-drawer :visible="drawer"
               size="40%"
               :before-close="handleClose"
               ref="drawer"
               :with-header="false">
      <!-- 头部 -->
      <div class="technicianInfo">
        <div class="technicianHeader">
          <img class="avater"
               :src="technicianData?.head"
               alt="" />
          <div class="technician">
            <div class="technicianName">
              <span class="nickName">{{ technicianData?.technicianName }}</span>
              <span v-if="technicianData?.authenticationNot == 2"
                    class="unauthentication">认证中</span>
              <span v-if="technicianData?.authenticationNot == 3"
                    class="authentication">已认证</span>
              <span v-if="technicianData?.authenticationNot == 3"
                    @click="modifyNameFn(technicianData.id)"
                    class="modifyName">修改技师名称</span>
            </div>

            <div class="score"
                 v-if="technicianData?.authenticationNot == 3">
              <el-rate v-model="technicianData.score"
                       disabled
                       text-color="#ff9900"
                       score-template="{value}">
              </el-rate>
              <span class="serviceNum">服务:{{
                  technicianData?.orderCount ? technicianData?.orderCount : '0'
                }}单</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 详情信息 -->
      <div class="detailInfo">
        <div class="subjectInformationLeft">
          <div>
            <div class="subjectInformationTitle flex-column-start">
              <div style="margin-bottom: 48px"
                   class="flex-baseline">
                <div> 您的电话 </div>
                <div class="leftHeight"> {{ technicianData?.mobile }} </div>
              </div>
              <div class="magrinHeight flex-baseline">
                <div> 技师年龄 </div>
                <div class="leftHeight"> {{ technicianData?.age }}岁 </div>
              </div>
              <div class="magrinHeight flex-baseline">
                <div> 所在城市 </div>
                <div class="leftHeight"> {{ technicianData?.city }} </div>
              </div>
              <div class="magrinHeight flex-baseline">
                <div> 详情地址 </div>
                <div class="leftHeight">
                  <el-tooltip class="item"
                              effect="dark"
                              :content="technicianData?.address"
                              placement="top">
                    <div class="font-overflow">
                      {{
                        technicianData?.address
                          ? technicianData.address
                          : '白云区'
                      }}</div>
                  </el-tooltip>
                </div>
              </div>

              <div class="magrinHeight flex-baseline">
                <div> 身份证号码 </div>
                <div class="leftHeight"> {{ technicianData?.cardNumber }}</div>
              </div>
              <div class="magrinHeight flex-baseline">
                <div> 身份证姓名 </div>
                <div class="leftHeight"> {{ technicianData?.cardName }} </div>
              </div>
            </div>
          </div>
          <div class="subjectInformationContent">
            <div class="title">
              <div> 技师性别 </div>
              <div> 从业时间</div>
              <div> 资质证书 </div>
              <div> 生活照片 </div>
              <div> 身份证正面 </div>
              <div>身份证反面 </div>
            </div>
            <div class="content">
              <div class="font-overflow"
                   :style="{
                  color: technicianData?.gender === 1 ? '#1890FF' : '#F09'
                }">{{ technicianData?.gender == 1 ? '男' : '女' }}</div>
              <div class="font-overflow">
                {{ technicianData?.employmentTime }}
              </div>

              <div class="view"
                   @click="onPreview(technicianData?.qualificationCertificate)">
                查看预览
              </div>
              <div class="view"
                   @click="onPreview(technicianData?.lifePhotos)">
                查看预览
              </div>
              <div class="view"
                   @click="onPreview(technicianData?.cardStraight)">
                查看预览
              </div>
              <div class="view"
                   @click="onPreview(technicianData?.cardReverse)">
                查看预览
              </div>
            </div>
          </div>
        </div>
        <div class="subjectInformationTitleBottom flex-column-start">
          <div class="magrinHeight flex-baseline">
            <div> 个人标签 </div>
            <div class="leftHeight">
              <div class="tag">
                <el-tag v-for="item in technicianData?.label"
                        :key="item"
                        :type="success">
                  {{ item }}
                </el-tag>
              </div>
            </div>
          </div>
          <div class="magrinHeight flex-baseline">
            <div> 个人介绍 </div>
            <div style="width: 700px"
                 class="leftHeight ffont-overflow3">
              {{
                technicianData?.personalLntroduction
                  ? technicianData?.personalLntroduction
                  : '你长的好漂亮哦你长的好漂亮哦你长的好漂亮哦你长的好漂亮哦'
              }}</div>
          </div>
          <div class="magrinHeight flex-start">
            <div> 服务类目 </div>
            <div class="leftHeight">
              <div class="flex-start">
                <div v-for="(item, i) in technicianData?.serviceCategories"
                     :key="i">
                  <div class="realNameStyle">
                    <img class="avaterName"
                         :src="item.categoryImages"
                         alt="" />
                    <div class="flex-column-start Categories">
                      <span>选择类目</span>
                      <span style="color: red;">{{ item.classificationName }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="magrinHeight flex-baseline">
            <div v-if="technicianData?.authenticationNot == 2"> 认证审核 </div>
            <div class="leftHeight">
              <div style="margin: 0"
                   v-if="technicianData?.authenticationNot == 2">
                <el-radio-group v-model="form.auditStatus"
                                style="margin: 0">
                  <el-radio :label="2"
                            @change="remarkFn"
                            :value="2">同意</el-radio>
                  <el-radio :label="3"
                            :value="3"
                            @change="remarkFn">驳回</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div> -->
          <div class="magrinHeight flex-start">
            <div v-if="technicianData?.authenticationNot == 4"
                 v-show="technicianData?.authenticationNot == 4?true:showRemark">
              驳回原因
            </div>
            <div class="leftHeight">
              <el-input v-if="technicianData?.authenticationNot == 4"
                        maxlength="100"
                        resize="none"
                        :disabled="true"
                        type="textarea"
                        v-show="technicianData?.authenticationNot == 4?true:showRemark"
                        show-word-limit
                        placeholder="请输入驳回原因"
                        v-model="technicianData.reasonRejection"></el-input>
            </div>
          </div>
        </div>
      </div>
      <!-- 提交返回按钮 -->
      <div class="drawer__footer">
        <div class="drawerFooterRight">
          <el-button round
                     @click="previousPage">返回</el-button>
          <el-button round
                     v-if="technicianData?.authenticationNot == 2"
                     :loading="loading"
                     @click="sumbitForm('wxSumbitForm')"
                     type="primary">提交</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 图片预览 -->
    <el-image-viewer v-if="showViewer"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="urlListArray" />

    <!-- 技师状态 -->
    <changeNameEdit :visible.sync="visible"
                    :id="id">
    </changeNameEdit>
  </div>
</template>
<script>

import changeNameEdit from './changeNameEdit.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import { technicianUpdate } from '@/api/technicianManagement/technicianList/index';
export default {
  name: 'drawerDetail',
  components: {
    ElImageViewer,
    changeNameEdit
  },
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      value: 5,
      // 个人标签

      showViewer: false, // 显示查看器
      // 图片预览数组
      imgViewArr: [],
      //   多选框
      checkList: ['选中且禁用', '复选框 A'],
      form: {
        // 提现状态 2 同意 3 不同意
        auditStatus: 2,
        reasonRejection: null
        // siteId: this.$store.state.site.info.id,
      },
      visible: false,
      showRemark: false,
      //  技师详情
      technicianData: null,

      loading: false,
      id: '',
    };
  },
  computed: {

    // 营业执照
    urlListArray () {
      return this.imgViewArr;
    },
    // ** 隐私部分带*号
    hiddenCardId () {
      return function (str, frontLen = 4, endLen = 4) {
        //str：要进行隐藏的变量  frontLen: 前面需要保留几位    endLen: 后面需要保留几位
        var len = str.length - frontLen - endLen;
        var start = '';
        for (var i = 0; i < len; i++) {
          start += '*';
        }
        // 最后的返回值由三部分组成
        return (
          str.substring(0, frontLen) +
          start +
          str.substring(str.length - endLen)
        );
      };
    },
    //  code码获取城市标题
    getRegionLabel () {
      return function (params) {
        console.log(cityData);

        return getRegionLabel(params);
      };
    }
  },
  methods: {
    // 点击按钮预览图片
    onPreview (imgStr) {
      console.log(imgStr);
      if (imgStr?.length) {
        if (imgStr.includes(',')) {
          console.log('字符串中包含逗号');
          // 包含的进行slice(',') 分割
          this.imgViewArr = imgStr.split(',').map((item) => item.trim());
        } else {
          console.log('字符串中不包含逗号');
          this.imgViewArr = imgStr.split();
        }

        this.showViewer = true;
      } else {
        this.$message({
          message: '没有上传图片无法进行预览',
          type: 'warning'
        });
      }
    },

    async sumbitForm () {
      if (this.form.auditStatus == 2) {
        this.form.reasonRejection = null;
      }
      const res = await technicianUpdate({
        ...this.form,
        id: this.technicianData.id,
        authenticationNot: this.form.auditStatus == 2 ? 3 : 4
      });
      console.log(res);
    },
    modifyNameFn (id) {
      this.visible = !this.visible
      this.id = id
    },
    remarkFn (val) {
      console.log(val);

      if (val == 3) {
        this.showRemark = true;
      } else {
        this.showRemark = false;
      }
    },
    // 关闭查看器
    closeViewer () {
      this.showViewer = false;
    },
    // 关闭抽屉
    previousPage () {
      this.$emit('update:drawer', false);
    },
    handleClose () {
      this.$emit('update:drawer', false);
    }
  },
  watch: {
    detailData (visible) {
      console.log(visible);

      if (visible.label?.length) {
        if (visible.label.includes(',')) {
          console.log('字符串中包含逗号');
          // 包含的进行slice(',') 分割
          visible.label = visible.label.split(',').map((item) => item.trim());
        } else {
          console.log('字符串中不包含逗号');
          visible.label = visible.label.split();
        }
      }
      console.log(visible);
      console.log(visible);
      if (Number(visible.score) == 5.0 || visible.score == null) {
        visible.score = '5'
      }
      this.technicianData = visible;


    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .el-textarea__inner {
  height: 100px;
  width: 500px;
}
.realNameStyle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 5px !important;
  padding-right: 6px;
  .avaterName {
    width: 52px;
    height: 52px;

    vertical-align: middle;
    margin-right: 5px;
  }
}
/deep/ .el-drawer__body {
  width: 864px;
}
.drawerDetail {
  position: relative;
  .technicianInfo {
    padding: 36px 20px 36px 20px;
    .technicianHeader {
      display: flex;
      align-items: center;
      .avater {
        width: 68px;
        height: 68px;
        border-radius: 68px;
        margin-right: 8px;
      }
      .technician {
        .technicianName {
          .nickName {
            color: black;
            font-weight: 600;
            font-size: 20px;
          }
          .unauthentication {
            color: #757575;
            font-size: 12px;
            margin-left: 6px;
            &::before {
              content: url('../../../../static/svg/unauthentication.svg');
              display: inline-block;
              vertical-align: middle;
              margin-right: 2px;
            }
          }
          .authentication {
            color: #26c278;
            font-size: 12px;
            margin-left: 6px;
            &::before {
              content: url('../../../../static/svg/authentication.svg');
              display: inline-block;
              vertical-align: middle;

              margin-right: 2px;
            }
          }
          .modifyName {
            color: #1e6ceb;
            margin-left: 5px;
            cursor: pointer;
          }
        }
        .score {
          margin-top: 13px;
          display: flex;
          .serviceNum {
            margin-left: 10px;
            color: #333;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
          }
        }
      }
    }
  }
  .detailInfo {
    .subjectInformationLeft {
      display: flex;

      justify-content: flex-start;
      .subjectInformationTitle {
        margin-left: 40px;
        width: 352px;
        .magrinHeight {
          margin: 12px 0 50px;
        }
        .leftHeight {
          margin-left: 30px;
        }
      }

      .subjectInformationContent {
        display: flex;

        justify-content: center;

        .title {
          margin-right: 46px;
          text-align: right;
          width: 130px;
          div {
            color: #666;
            margin: 60px 0 60px;
          }
          div:nth-child(1) {
            margin: 0px 0 48px;
          }
        }
        .content {
          width: 250px;
          div {
            color: #000;
            margin: 61px 0 60px;
          }
          .view {
            color: #1e6ceb;
            cursor: pointer;
          }
          div:nth-child(1) {
            margin: 0px 0 63px;
          }
          div:nth-child(2) {
            margin: 22px 0 0px;
          }
          div:nth-child(4) {
            margin: 22px 0 0px;
          }
          div:nth-child(5) {
            margin: 60px 0 60px;
          }
          div:nth-child(6) {
            margin: 60px 0 58px;
          }
        }

        //   background-color: aquamarine;
      }
    }
  }
  .subjectInformationTitleBottom {
    margin-left: 40px;
    width: 100%;
    .magrinHeight {
      margin: 12px 0 50px;
    }
    .leftHeight {
      margin-left: 30px;
    }
  }
  .drawer__footer {
    display: flex;
    justify-content: space-between;
    padding: 25px 0 25px 45px;

    width: 825px;
    bottom: 0;
  }
}
</style>
